<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <input type="text" id="uid" placeholder="uid" />
      <input type="text" id="input" placeholder="请输入内容" />
      <button id="send">发送消息</button>
      <button id="login">登录</button>
      <div id="show"></div>
    </div>
    <script>
      /*
              客户端
              客户端不用下载包 h5新增特性 canvas/storage/
              ws://localhost:3009 服务器
          */
      let webSocket = null;
      // 连接服务器
      webSocket = new WebSocket("ws://localhost:3001");
      // 点击登录的时候保存当前账号
      login.onclick = function () {
        webSocket.send(
          JSON.stringify({
            // type值如果为login 表示需要等路由就保存当前账户
            type: "login",
            // 发送者的名字
            uid: uid.value || "这个人没有取名字",
          })
        );
      };
      window.onload=()=>{
        
      }
      //  点击发消息
      send.onclick = function () {
        console.log("111111112131313");
        console.log(uid !== "");
        // 首先判断有没有发送者名字有没有填
        if (!uid.value) {
          console.log("asdsa");
          alert("您的名字是...");
        } else if (!input.value) {
          alert("您想说什么？");
        } else {
          webSocket.send(
            JSON.stringify({
              // type值如果为message 表示要发送信息给某人
              type: "message",
              uid: uid.value || "这个人没有取名字",
              //需要发送的内容
              mess: input.value.trim(),
              // 发送消息的时间
              createTime: new Date() - 0,
            })
          );
        }
      };
      // 监听服务器返回信息时执行
      webSocket.onmessage = function (obj) {
        let msg = JSON.parse(obj.data);
        // 首先判断该用户有没有登录 没有登录会返回--01
        if (msg.code === "01") {
          console.log("没有登录");
          alert("请先登录喔");
        } else {
          console.log("登录了");
          // 接收服务器返回的信息
          // 只有对应用户才能接收到

          console.log(msg);
          show.innerHTML += `${msg.uid}:${msg.mess}<br>`;
        }
      };
    </script>
  </body>
</html>
